<script setup lang="ts">
    import { computed, provide, ref } from 'vue';
    import { userSessionStore } from '@/stores/session';

    import ChatContentHeader from '@/components/ChatBox/Content/Header/index.vue';
    import ChatContentList from '@/components/ChatBox/Content/List/index.vue';
    import ChatContentInput from '@/components/ChatBox/Content/Input/index.vue';

    const sessionStore = userSessionStore();

    const isShow = computed(() => sessionStore.currentSession.session_id !== 1);

    const messageListRef = ref()
    // 提供ref给子组件使用
    provide('messageListRef', messageListRef)

</script>
<template>
    <div class="chat-content">
        <div class="chat-content-wrepper" v-show="isShow">
            <!-- 聊天框头部 -->
            <chat-content-header :title="sessionStore.currentSessionInfo?.target_user_info?.nickName" @close="$emit('close')" />
            <!-- 聊天框消息列表框 -->
            <chat-content-list ref="messageListRef" />
            <!-- 聊天框消息发送框 -->
            <chat-content-input ref="messageInputRef" />
        </div>
        <div class="chat-content-wrepper" v-show="!isShow">
            <div class="chat-close">
                <el-icon class="el-icon-close" @click="$emit('close')" style="cursor: pointer;"><Close /></el-icon>
            </div>
            <div class="chat-empty">
                <svg-icon href='#icon-nodata' width="200px" height="200px"></svg-icon>
                <span style='color: #8a919f;'>暂未选中或发起聊天，快去找人聊聊吧～</span>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
    .chat-content {
        height: 625px;
        & .chat-content-wrepper {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }
        & .chat-empty {
            display: flex;
            align-items: center;
            flex-direction: column;
            height: 100%;
            justify-content: center;
        }
        & .chat-close {
            position: absolute;
            margin-left: 510px;
            margin-top: 15px;
            cursor: pointer;
            font-size: 16px;
        }
        & .chat-close:hover {
            color: #50A6FF;
        }
    }
</style>